<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 通过拖放实现添加、删除 </title>
    <style type="text/css">
        div>div {
            display: inline-block;
            padding: 10px;
            background-color: #777;
            margin: 3px;
        }
    </style>
</head>

<body>
    <div style="width:600px;border:1px solid black;">
        <h2>将dom拖入到收藏夹</h2>
        <div draggable="true" ondragstart="dsHandler(event);" style="background: red;">dom1</div>
        <div draggable="true" ondragstart="dsHandler(event);">dom2</div>
        <div draggable="true" ondragstart="dsHandler(event);">dom3</div>
        <div draggable="true" ondragstart="dsHandler(event);">dom4</div>
    </div>
    <div id="dest" style="width:400px;height:260px; 
	    border:1px solid black;float:left;">
        <h2 ondragleave="return false;">收藏夹</h2>
    </div>
    <div id="gb" draggable="false" style="border:1px solid;background: red;height: 300px;width:300px;float:left;">删除拖至这里</div>
    <script type="text/javascript">
        var dest = document.getElementById("dest");
        // 开始拖动事件的事件监听器
        var dsHandler = function(evt) {
            console.log(evt.dataTransfer)
            // 将被拖动元素的innerHTML属性值设置成被拖动的数据
            evt.dataTransfer.setData("text/plain", "<item>" + evt.target.innerHTML);
        }
        dest.ondrop = function(evt) {
            evt.preventDefault();
            var text = evt.dataTransfer.getData("text/plain");
            // 如果该text以<item>开头
            if (text.indexOf("<item>") == 0) {
                // 创建一个新的div元素
                var newEle = document.createElement("div");
                // 以当前时间为该元素生成一个唯一的ID
                newEle.id = new Date().getUTCMilliseconds();
                // 该元素内容为“拖”过来的数据
                newEle.innerHTML = text.substring(6);
                // 设置该元素允许拖动
                newEle.draggable = "true";
                // 为该元素的开始拖动事件指定监听器
                newEle.ondragstart = function(evt) {
                    // 将被拖动元素的id属性值设置成被拖动的数据
                    evt.dataTransfer.setData("text/plain", "<remove>" + newEle.id);
                }
                dest.appendChild(newEle);
            }
        }
        // 当把被拖动元素“放”到垃圾桶上时激发该方法。
        document.getElementById("gb").ondrop = function(evt) {
            var id = evt.dataTransfer.getData("text/plain");
            // 如果id以<remove>开头
            if (id.indexOf("<remove>") == 0) {
                // 根据“拖”过来的数据，获取被拖动的元素
                var target = document.getElementById(id.substring(8));
                // 删除被拖动的元素
                dest.removeChild(target);
            }
        }
        document.ondragover = function(evt) {
            // 取消事件的默认行为
            return false;
        }
        document.ondrop = function(evt) {
            // 取消事件的默认行为
            return false;
        }
    </script>
</body>

</html>